<template>
  <!-- 服务对象信息查询模块 -->
  <div>
    <el-row>
      <el-row>
        <el-col :span="8">
          <el-button @click="exportData" style="float:left;" type="success">
            <img src="../../assets/daoru.png" alt=""> 导出
          </el-button>
          <el-upload action="xxxxxxxxxx" style="text-align:left;display:inline-block;width:150px;height:38px;overflow: hidden;margin-left:10px">
            <el-button type="success">
              <img src="../../assets/daochu.png" alt=""> EXCEL导入
            </el-button>
          </el-upload>
        </el-col>
        <el-col :span="16">
          <div align="right">
            <el-button type="primary" @click="addNewPerson"> <i class="el-icon-plus">添加服务对象</i> </el-button>
            <el-input style="width:200px" v-model="filters.name" placeholder="姓名"></el-input>
            <el-input style="width:200px" v-model="filters.certifID" placeholder="身份证号"></el-input>
            <el-select v-model="filters.servedPersonTypeValue" placeholder="人口类型">
              <el-option v-for="(v,i) of PersonType" :key="i" :value="v.servedPersonTypeValue" :label="v.servedPersonTypeName"></el-option>
            </el-select>
            <el-button type="primary" @click="searchInfo">查询</el-button>
            <el-button type="primary" @click="findAll">显示所有</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="padding-top:10px">
          <el-table :data="dataList" style="width:100%">
            <el-table-column label="编号" prop="servedPersonID" align="center" fixed>
            </el-table-column>
            <el-table-column label="姓名" prop="name" align="center">
            </el-table-column>
            <el-table-column label="性别" prop="sex" align="center">
              <template scope="scope">
                {{scope.row.sex == 1 ? '男' : '女'}}
              </template>
            </el-table-column>
            <el-table-column label="人口类型" prop="servedPersonTypeName" align="center">
            </el-table-column>
            <el-table-column label="政治面貌" prop="politics" align="center">
            </el-table-column>
            <el-table-column label="身份证号" prop="certifID" align="center">
            </el-table-column>
            <el-table-column label="出生日期" prop="birthDate" align="center">
            </el-table-column>
            <el-table-column label="职业" prop="career" align="center">
            </el-table-column>
            <el-table-column label="移动电话" prop="mobileTel" align="center">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="300" align="center">
              <template scope="scope">
                <el-button type="text" @click="checkDetail(scope.row)" size="small">查看详情</el-button>
                <el-button type="text" @click="edit(scope.row)" size="small">编辑</el-button>
                <el-button type="text" @click="delPerson(scope.row)" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
            <el-pagination style="margin-top:10px;float:right" layout="prev, pager, next" :total="totalInfo" :current-page="currentPage" @current-change="handleCurrentChange">
            </el-pagination>
          </el-col>
      </el-row>
    </el-row>

    <el-dialog size="tiny" title="请选择添加对象的类型" :visible.sync="addDialogVisible">
      <div align="center">
         <el-radio-group v-model="myselect">
          <el-radio label="chinese">中国大陆</el-radio>
          <el-radio label="foreigner">境外人员</el-radio>
        </el-radio-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="makeSure">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog top="5%" title="查看详情" :visible.sync="visible">
      <info :id="id"></info>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/zonghezhili/duiwujianshe";
import info from "./ServedPersonDetailInfo";
export default {
  components:{
    info:info
  },
  data() {
    return {
      filters: {
        // 查询表单
        name: null, // 姓名
        isSpecialPopulation: 1,
        servedPersonTypeValue: null, //人口类型
        certifID: null, //身份证
        page: 1, // 页码
        pageSize: 10 // 页号
      },
      currentPage:1,
      memberInfo: {}, // 人员详细情况
      dataList: [
        {
          servedPersonID: "1", // 服务对象编号
          servedPersonTypeValue: "1", // 服务对象类型
          servedPersonTypeName: "流动人口", // '服务对象的类型，包括01=户籍人口，02=流动人口，03=留守人员，99=境外人员。';
          certifID: "2342424234", // 身份证号
          name: "王五", // 姓名
          nameUsed: "王思", // 曾用名
          sex: "男", // 性别
          birthDate: "1990-07-14", // 出生日期，格式为“YYYYMMDD”
          ethnicity: "汉", // 民族
          nativePlace: "江苏苏州", // 籍贯，出生地，老家
          politics: "党员", // 政治面貌
          maritalStatus: "未婚", // 婚姻状况
          education: "本科", // 学历
          religiousBelief: "无", // 宗教信仰，后期需要符合标准编码
          careerType: "公职", // 职业类别
          career: "公务员", // 职业
          mobileTel: "124353466", // 移动电话
          fixedTel: "457547457", // 固定电话
          isSpecialPopulation: true, // 是否为特殊人群
          servedPlace: "公安局", // 服务处所
          domicileAddress: "", // 户籍地
          domicileAddressDetail: "", // 户籍门(楼)详细地址',
          presentAddress: "", // 现住地',
          presentAddressDetail: "" // 现住地门(楼)详细地址'
        },
        {
          servedPersonID: 2,
          name: "JACK",
          servedPersonTypeValue: "99", // 服务对象类型
          servedPersonTypeName: "境外人员"
        }
      ],
      totalInfo: 100,
      dialogVisible: false,
      addDialogVisible: false,
      myselect: "chinese",
      PersonType: [],
      id:"1",
      visible:false
    };
  },
  methods: {
    // 翻页
    handleCurrentChange(val) {
      this.filters.page = val;
      this.getServedMemberInfo();
    },
    // 获取所有被服务对象的信息
    getServedMemberInfo() {
      api.fetchServedMemberInfo(this.filters).then(res => {
          this.dataList = res.data.queryVO;
          this.totalInfo = res.data.page.totalCount;
        })
        .catch(err => {});
    },
    // 搜索信息
    searchInfo() {
      this.filters.page = 1;
      this.getServedMemberInfo();
    },
    findAll() {
      this.filters = {
        name: null, // 姓名
        nativePlace: "", // 职位
        page: 1, // 页码
        pageSize: 10 // 页号
      };
      this.getServedMemberInfo();
    },
    edit(row) {
      if (row.servedPersonTypeValue !== "99")
        // 如果不是境外人员
        this.$router.push({
          path: "ServedPersonEdit",
          query: { id: row.certifID }
        });
      else
        this.$router.push({
          path: "ServedForeignerEdit",
          query: { id: row.servedPersonID }
        });
    },
    checkDetail(row) {
      // 查看人员的详情
      if (row.servedPersonTypeValue !== "99")
        this.id = row.certifID;
      else
        this.$router.push({
          path: "ForeignerServedDetail",
          query: { id: row.servedPersonID }
        });

      this.visible = true;
    },
    delPerson(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          api
            .deleteServedPerson(row.servedPersonTypeValue, row.certifID)
            .then(res => {
              if (res.data) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    exportData() {},
    addNewPerson() {
      this.addDialogVisible = true;
    },
    makeSure() {
      if (this.myselect === "chinese") {
        this.$router.push("addCNServedPerson");
      } else {
        this.$router.push("addENServedPerson");
      }
    }
  },
  mounted() {

    this.getServedMemberInfo();
    api.fetchServedPersonManageTypes().then(res => {
      this.PersonType = res.data.codeServedPersonType;
    });
  }
};
</script>

<style scoped>
.userInfoEditTable,
.userInfoEditTable td {
  border: 1px solid darkgrey;
}

td {
  text-align: left;
  padding: 10px;
}
</style>
